<template>
  <div class="main">
    <div class="account-msg">
      <p class="title">
        我的资料
      </p>
      <div class="head-portrait">
        <input type="file" name="avatar"  ref="avatarUp" id="avatar_up" @change="handerAvatar">
        <div class="head-portrait-box">
          <img :src="avatarUrl" alt="">
          <div class="head-mask"  @click.stop="uploadAvatar"></div>
          <span class=" icon-xiangji icon-mask" @click.stop="uploadAvatar">替换</span>
        </div>
      </div>

      <div class="row">
        <div class="row-title">

          <span class="title-info">
            昵称
            <span class="explain" @mousemove="articleState=true" @mouseout="articleState=false" ><i class="iconfont icon-bangzhu"></i></span>
            <div class="explain-box" v-if="articleState">
                <h2>修改昵称</h2>
                <p>1.用户你好，宠物视界允许普通用户一年修改一次昵称，请谨慎交，橙V、蓝V认证用户修改次数详细规则<span>查看详情规则</span></p>
                <p>2.宠物视界年会员最多可修改5次/年<span>立即开通会员</span></p>
            </div>
          </span>
        </div>
        <div class="row-input">
          <input  type="text"  maxlength='30' minlength="4" name="title" v-focus @blur="handerUserName" v-model.trim="nameText">
          <div class="row-tips">
            <span class="placeholder">4～30个字符，支持中英文、数字</span>

          </div>
        </div>
      </div>
       <div class="row">
        <div class="row-title">简介</div>
        <div class="row-input">
          <input  type="text" placeholder="介绍一下自己吧"  maxlength='140' minlength="1" name="title" v-focus @blur="handerIncol" v-model.trim="introductionText">
          <div class="row-tips">
            <span class="placeholder">1～140个字符</span>

          </div>
        </div>
      </div>
       <div class="row">
         <!-- <div class="content-submission" v-show="showbtn" ref="showbtn">
              <button class="btn-cancel" @click="clearVal()"><span>取消</span></button>
              <button class="btn-save"><span>保存</span></button>
            </div> -->
      </div>
    </div>
    <div class="split-line"></div>
    <div class="account-msg min-msg">
      <p class="title">
        个人基本资料
      </p>
      <div class="row">
        <div class="row-title">性别</div>
        <div class="checked-sex">
          <span class="checked-box" >
              <input type="radio" name="gender" id="gender" value="1" v-model="gender" @change="handerBlur" >
              <label for="gender"></label>
              <span class="text">男</span>
          </span>
          <span class="checked-box" >
              <input type="radio" name="gender" id="gender" value="2" v-model="gender" @change="handerBlur">
              <label for="gender"></label>
              <span class="text">女</span>
          </span>
        </div>
      </div>
      <!-- 生日 -->
      <div class="row">
        <div class="row-title">生日</div>
         <div class="block">

            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="选择日期"
              @change="handerBlur"

            />
          </div>

      </div>
      <!--感情状况  -->
      <div class="row">
        <div class="row-title">感情状况</div>
          <el-select v-model="emotionValue" clearable placeholder="选择情感状态" @change="handerBlur">
            <el-option
              v-for="item in emotionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
      </div>
      <div class="row">
        <div class="row-title">所在地</div>
               <el-select v-model="LocationValue" clearable placeholder="选择所在地" @change="handerBlur">
            <el-option
              v-for="item in LocationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
      </div>
      <div class="row">
        <div class="row-title">家乡</div>
                    <el-select v-model="homeLocatioValue" clearable placeholder="选择家乡" @change="handerBlur">
            <el-option
              v-for="item in LocationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
      </div>
    </div>

    <!-- <template> -->
      <div class="model" v-show="ismodel">
        <div class="model-box">
          <div class="model-head">
            <span class="model-title">编辑头像</span>
            <span class="icon"><i class="iconfont icon-guanbi" @click="close()"></i></span>
          </div>
          <div class="model-content">
            <div class="edit-avatar">
              <div class="croppeer-avatar">
                <div class="croppeer">
                  <img src="" alt="">
                </div>
                <div class="croppeer-msg">
                  <div class="change-avatar">
                    <button type="file" class="btn"><span>更换头像</span></button>
                  </div>
                   <div class="rotate-avatar">
                    <button  class="btn"><span><i class="iconfont icon-shuaxin" style="padding-right:3px"></i>旋转90度</span></button>
                  </div>
                </div>
              </div>
            </div>
            <div class="example">
              <p style="margin-top:20px;font-size:14px">头像预览</p>
              <div class="full-preview">
                <img src="" alt="">
              </div>
              <div class="size-text">100x100px</div>
              <div class="half-preview">
                <img src="" alt="">
              </div>
              <div class="size-text">50x50px</div>
            </div>
          </div>
          <div class="sub-btn">
             <button class="btn-cancel"><span>取消</span></button>
              <button class="btn-save"><span>保存</span></button>
          </div>
        </div>
      </div>

      <!-- <div class="mask" v-show="ismask"></div> -->
    <!-- </template> -->
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import http from '@/util/http'
export default {
  data () {
    return {
      ismodel: false, // 裁剪头像模态框是否隐藏
      ismask: false, // 遮罩层是否隐藏
      nameText: '', // 昵称值
      introductionText: '', // 简介值
      showbtn: false,
      articleState: false, // 显示文章分类说明
      gender: null, // 用户性别的选择
      isActive: true,
      activeDisplay: 'none', // 下拉选择是否隐藏
      issingle: false, // 单一选项是否隐藏
      isplaceholder: true, // 提示是否隐藏
      oldUserName: '', // 旧用户名
      avatarUrl: '', // 用户头像的图片路径
      avatarVal: '', // 用户头像的名称
      // 生日
      value1: NaN,

      timeList: [
        {
          id: 1,

          classfify: '年',
          list: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
        },
        {
          id: 2,
          classfify: '月',
          list: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
        },
        {
          id: 3,
          classfify: '日',
          list: []
        }
      ], // 时间

      ischoose: true,
      userdata: {}, // 用户的资料
      // 日期选择
      shortcuts: [
        {
          text: 'Today',
          value: new Date()
        },
        {
          text: 'Yesterday',
          value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            return date
          }
        },
        {
          text: 'A week ago',
          value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            return date
          }
        }
      ],
      // 情感选择
      emotionOptions: [
        {
          value: '单身',
          label: '单身'
        },
        {
          value: '求交往',
          label: '求交往'
        },
        {
          value: '暗恋中',
          label: '暗恋中'
        },
        {
          value: '暧昧中',
          label: '暧昧中'
        },
        {
          value: '恋爱中',
          label: '恋爱中'
        },
        {
          value: '订婚',
          label: '订婚'
        },
        {
          value: '已婚',
          label: '已婚'
        },
        {
          value: '分居',
          label: '分居'
        },
        {
          value: '离居',
          label: '离居'
        },
        {
          value: '丧偶',
          label: '丧偶'
        },
        {
          value: '不选',
          label: '不选'
        }
      ],
      // 情感选中值
      emotionValue: '',
      // 所在地
      LocationOptions: [
        {
          value: '河北',
          label: '河北'
        },
        {
          value: '山西',
          label: '山西'
        },
        {
          value: '吉林',
          label: '吉林'
        },
        {
          value: '黑龙江',
          label: '黑龙江'
        },
        {
          value: '江苏',
          label: '江苏'
        },
        {
          value: '浙江',
          label: '浙江'
        },
        {
          value: '安徽',
          label: '安徽'
        },
        {
          value: '福建',
          label: '福建'
        },
        {
          value: '江西',
          label: '江西'
        },
        {
          value: '山东',
          label: '山东'
        },
        {
          value: '河南',
          label: '河南'
        },
        {
          value: '湖北',
          label: '湖北'
        },
        {
          value: '湖南',
          label: '湖南'
        },
        {
          value: '广东',
          label: '广东'
        },
        {
          value: '海南',
          label: '海南'
        },
        {
          value: '四川',
          label: '四川'
        },
        {
          value: '贵州',
          label: '贵州'
        },
        {
          value: '云南',
          label: '云南'
        },
        {
          value: '陕西',
          label: '陕西'
        },
        {
          value: '甘肃',
          label: '甘肃'
        },
        {
          value: '青海',
          label: '青海'
        },
        {
          value: '台湾',
          label: '台湾'
        },
        {
          value: '内蒙古',
          label: '内蒙古'
        },
        {
          value: '西藏',
          label: '西藏'
        },
        {
          value: '宁夏',
          label: '宁夏'
        },
        {
          value: '新疆',
          label: '新疆'
        },
        {
          value: '北京',
          label: '北京'
        },
        {
          value: '天津',
          label: '天津'
        },
        {
          value: '上海',
          label: '上海'
        },
        {
          value: '重庆',
          label: '重庆'
        },
        {
          value: '香港',
          label: '香港'
        },
        {
          value: '澳门',
          label: '澳门'
        },
        {
          value: '海外',
          label: '海外'
        },
        {
          value: '其他',
          label: '其他'
        }

      ],
      // 所在地选中值
      LocationValue: '',
      // 家乡选中值
      homeLocatioValue: ''
    }
  },
  mounted () {
    http.getmydata(this.user.uid).then(res => {
      console.log(res.data)
      if (+res.data.ok === 1) {
        this.userdata = res.data.data
        this.nameText = res.data.data.username // 用户名
        this.oldUserName = res.data.data.username // 长期存储用户名
        this.introductionText = res.data.data.introduce // 用户简介
        this.gender = res.data.data.gender // 用户性别
        this.value1 = res.data.data.birthday // 生日
        this.emotionValue = res.data.data.emotion // 情感状态
        this.LocationValue = res.data.data.Location // 用户所在弟
        this.homeLocatioValue = res.data.data.homeLocation // 家乡所在地
        this.avatarUrl = res.data.data.avatar_url // 用户头像地址
        this.avatarVal = res.data.data.avatar // 用户头像名
      }
    })
  },
  updated () {

  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    ...mapMutations(['UserDataAvatar']),
    // 日期方法
    disabledDate (time) {
      return time.getTime() > Date.now()
    },
    // 发送请求的方法
    async updateUser () {
      const data = {}
      data.uid = this.user.uid
      data.username = this.nameText
      data.gender = this.gender
      data.introduce = this.introductionText

      data.emotion = this.emotionValue
      data.Location = this.LocationValue
      data.homeLocation = this.homeLocatioValue
      data.birthday = await this.getDate()
      console.log(data, '修改的数据')
      http.updateUserData(data).then(res => {
        console.log(res.data)
      })
    },

    // 裁剪头像模态框
    // show () {
    //   this.ismodel = true
    //   this.ismask = true
    // },
    // close () {
    //   this.ismodel = false
    //   this.ismask = false
    // },
    clearVal () {
      this.nameText = ''
      this.introductionText = ''
      this.domainNameText = ''
    },
    info () {
      this.isActive = !this.isActive
      this.activeDisplay = 'block'
      this.isplaceholder = false
    },
    getVal () {
      this.issingle = !this.issingle
    },
    // 点击触发上传用户头像的input框
    uploadAvatar () {
      this.$refs.avatarUp.click()
    },
    // 上传头像的事件
    handerAvatar () {
      // 创建formdata实例
      const fm = new FormData()
      console.log(this.$refs.avatarUp.files[0])
      //
      fm.append('avatar', this.$refs.avatarUp.files[0])
      fm.append('uid', this.user.uid)
      fm.append('old_avatar', this.avatarVal)
      // 上传用户头像的方法
      http.updateAvatar(fm).then(res => {
        console.log(res.data)
        // 修改成功
        if (+res.data.ok === 1) {
          this.avatarVal = res.data.avatar_name
          this.avatarUrl = res.data.avatar_url
          // 修改持久化数据中的头像数据
          this.UserDataAvatar(res.data.avatar_url)
        }
      })
    },
    // 失去焦点事件
    handerBlur () {
      // 发送请求
      // console.log(this.value1)

      this.updateUser()
    },
    getDate () {
      var date = this.value1
      var year = date.getFullYear() //  返回的是年份
      var month = date.getMonth() + 1 //  返回的月份上个月的月份，记得+1才是当月
      var dates = date.getDate()
      if (month < 10)month = '0' + month
      if (date < 10)date = '0' + date
      var time = year + '-' + month + '-' + dates

      // 返回的是： 2022-07-28
      return time
    },
    // 当用户长度小于四时更改
    handerUserName () {
      // 校验用户名
      // 如果
      if (this.nameText.length < 4) {
        this.nameText = this.oldUserName
      }
      // 发送请求
      this.updateUser()
    },
    // 用户简介
    handerIncol () {
      // 发送请求
      this.updateUser()
    }

  },
  watch: {
    // 监听帐号信息中的input框输入内容时显示按钮

  },
  directives: {
    focus: {
      mounted (el) {
        const father = el.parentNode
        el.onfocus = function () {
          father.className = 'item_info_focus row-input'
        }
        el.onblur = function () {
          father.className = 'row-input '
        }
      }
    }
  }
}
</script>

<style  lang="scss" scoped>
.main{
  width: 100%;
  background: #fff;
  .title{
    font-size: 18px;
    padding: 5px 0 5px 15px;
  }
  .min-msg{
      min-height: 450px;
  }
  .account-msg{
    width: 100%;
    padding: 20px 0 30px 0;
    .head-portrait{
      width: 100%;
      #avatar_up{
        display: none;
      }
      .head-portrait-box{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        overflow: hidden;
        margin: 20px auto;
        position: relative;
        cursor: pointer;
        &:hover{
          .head-mask{
            display: block;
          }
          .icon-mask{
            display: block;
          }
        }
        img{
          width: 100%;
          display: block;
        }

        .head-mask{
          width: 100px;
          height: 100px;
          border-radius: 50%;
          overflow: hidden;
          background: rgba($color: #000000, $alpha: .4);
          position: absolute;
          top: 0;
          left: 0;
          display: none;
          // &:hover{
          //   display: block;
          // }
        }
        .icon-mask{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          font-size: 14px;
          color: #fff;
          display: none;

        }
      }
    }
    .row{
      width: 100%;
      display: flex;
      align-items: center;
      margin-top: 40px;
      // justify-content: center;

      .row-title{
        width: 12%;
        font-size: 14px;
        color: #333;
        text-align: right;
        margin-right: 15px;

        .title-info{
          // margin-right: 20px;
          position: relative;
          .explain{
            cursor: pointer;
            i{
                font-size: 14px;
                color: #979799;
            }
          }
          .explain-box{
            position: absolute;
            top: 30px;
            left: 50px;
            width: 150px;
            height: 180px;
            border-radius: 15px;
            background: #fff;
            padding: 20px;
            border: 1px solid #efefef;
            box-shadow: 3px 2px 2px rgb(240, 240, 240), -3px -2px 2px rgb(240, 240, 240);
            z-index:901;

            h2{
                text-align: center;
                font-size: 16px;
                line-height: 24px;
                font-weight: 700;
            }
            p{
                font-size: 12px;
                font-weight: normal;
                line-height: 20px;
                color: #808080;
                text-align: left;
                margin-top: 10px;
            }
            span{
              padding: 0 5px;
              color: #ff8200;
              cursor: pointer;
            }
          }
        }
      }

       //输入框高亮
      .item_info_focus{
          border: 1px solid #f60 !important;
          background: #fff !important;
          }

      .row-input{
        width: 80%;
        // margin-top: 10px;
        height: 36px;
        border: 1px solid #f0f1f4;
        border-radius: 8px;
        box-sizing: border-box;
        display: flex;
        background: #f0f1f4;
        transition: all 0.4s;
        // overflow: hidden;
        flex-wrap: wrap;
        input{
          width: 95%;
          height: 36px;
          font-size: 12px;
          color: #333;
          margin: auto;
          border: none;
          display: inline-block;
          background: rgba(240, 241, 244,0);
          &:focus{outline:none;}
           &::placeholder {
            color: #808080;
            font-size: 13px;
            }
        }

        .row-tips{
          margin-top: 5px;
          width: 100%;
          display: flex;
          justify-content: space-between;
          color: #939393;
          font-size: 12px;

          .placeholder{
            margin-top: 5px;
          }

          .content-submission{
            button{
              height: 25px;
              min-width: 36px;
              font-size: 14px;
              border-radius: 20px;
              padding: 0 9px;
              margin-left: 10px;
              cursor: pointer;
            }
            .btn-cancel{
              border: 1px solid #333;
              color: #333;
              background: transparent;
              &:hover{
                background: #eaeaea;
              }
            }
            .btn-save{
              border: 1px solid #ff8200;
              color: #ff8200;
              background: transparent;
              &:hover{
                background: #fff2e5;
              }
            }
          }
        }
      }
      .checked-sex{
        font-size: 12px;
        color: #333;
        .checked-box{
          height: 14px;
          font-weight: normal;
          margin:  0 20px;
          line-height: 18px;
          display: inline-block;
          position: relative;
          .text{
              width: 30px;
              display: inline-block;
              padding-left: 5px;

          }
          label{
              position: absolute;
                  display: inline-block;
                  top: 3px ;
                  left: -20px;
                  width: 12px ;
                  height: 12px ;
                  background-color: #fff;
              border: 1px solid #767676;
                  border-radius: 50%;
          }
          input{
              z-index: 900;
              position: absolute;
              top: 3px ;
              left: -20px;
              width: 13px;
              height: 13px;
              display: inline-block;
              padding: 3px;
              color: #f60;
              background-color: #f60;
              opacity: 0;

              &:checked+label {
                  // position: absolute;
                  display: inline-block;
                  // top: 3px ;
                  // left: -20px;
                  width: 12px ;
                  height: 12px ;
                  background-color: #f60;
                  border: 1px solid #f60;
                  border-radius: 50%;

                  }
              &:checked+label::after {
                  position: absolute;
                  content: "";
                  display: inline-block;
                  top: 50% ;
                  left: 50%;
                  transform: translate(-50%,-50%);
                  width: 4px ;
                  height:4px ;
                  border-radius: 50%;
                  background-color: #fff;
                  border: 1px solid #fff !important;
                  }

          }
        }
      }
      .drop-down-menu{
        width: 80%;
        display: flex;
        align-items: center;
        .drop-down-item{
        width: 90px;
        height: 36px;
        border: 1px solid #f0f1f4;
        border-radius: 8px;
        box-sizing: border-box;
        display: flex;
        background: #f0f1f4;
        transition: all 0.4s;
        // overflow: hidden;
        position: relative;
        cursor: pointer;
        margin-right: 10px ;
        .triangle-icon{
          position: absolute;
          right:  0;
          bottom:  0;
          transform: translate(-50%,-50%);
          transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          font-weight: 700;
        }
        .drop-down-targets{
          font-size: 12px;
          line-height: 35px;
          .targ-input{
            width: 0;
            position: absolute;
            padding: 0;
            display: inline-block;
            border: none;
            min-height: 20px;
            line-height: 20px;
            background: transparent;
            &::placeholder{
              font-size: 12px;
            }
          }
          // 样式改变后
          .targ-input-two{
            width: 100px;
            display: inline-block;
            padding-left: 10px;
            border: none;
            min-height: 20px;
            line-height: 20px;
            background: transparent;
            &::placeholder{
              font-size: 12px;
            }
          }
          .drop-down-value{
            min-height: 20px;
            line-height: 35px;
            margin: 0;
            padding: 0 0 0 10px;
            color: #939393;
          }
          .drop-down-placeholder{
            min-height: 20px;
            line-height: 35px;
            margin: 0;
            padding: 0 0 0 10px;
            color: #939393;
          }
        }
        .drop-down-list{
          max-height: 264px!important;
          margin: 6px 0;
          background: #fff;
          border: 1px solid #e9e9e9;
          border-radius: 5px;
          box-shadow: 0 1px 3px 0 rgba($color: #000000, $alpha: .1) ;
          position: absolute;
          left: 0;
          top:  100%;
          display: block;
          width: 100%;
          overflow: auto;
          z-index: 50;
          display: none;
          .drop-down-list-content{
            list-style: none;
            display: inline-block;
            padding: 0;
            margin: 0;
            min-width: 100%;
            .drop-down-list-element{
              display: block;
              padding: 10px 10px ;
              &:hover{
                  background: #f8f8fb;
                }
              span{
                min-height: 12px;
                line-height: 1;
                color: #767676;
                cursor: pointer;
                white-space: nowrap;
              }

              // 下拉框值选中后高亮
              .chooseitem{
                color: #ff8200;
                font-size: 16px;
              }
            }
          }
        }
        }
      }
    }
  }
   .split-line{
    border-bottom: 1px solid #efefef;
    margin: 20px 0;
   }
}
.model{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1001;
  .model-box{
    width: 550px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 20px;
    .model-head{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #efefef;
      .model-title{
        font-size: 16px;
        font-weight: 700;
      }
      .icon{
        cursor: pointer;
      }
    }
    .model-content{
      padding: 20px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      .croppeer-avatar{
        .croppeer{
          width: 360px;
          height: 360px;
          overflow: hidden;
          img{
            display: block;
            width: 100%;
          }
        }
        .croppeer-msg{
          width: 360px;
          margin-top: 5px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .btn{
            border: none;
            color: #f60;
            font-size: 14px;
            background: transparent;
            cursor: pointer;
          }
        }
      }
      .example{
        display: flex;
        flex-direction: column;
        align-items: center;
        // justify-content: space-between;
        width: 140px;
        height: 360px;
        line-height: 16px;
        background: #f2f2f2;
        .full-preview{
          width: 100px;
          height: 100px;
          margin: 32px 0 0;
          outline: 3px solid #fff;
          border-radius: 50%;
          overflow: hidden;
          img{
            width: 100%;
            display: block;
            border-radius: 50%;
          }
        }
        .half-preview{
          width: 50px;
          height: 50px;
          margin: 32px 0 0;
          border-radius: 50%;
          overflow: hidden;
          img{
            width: 100%;
            display: block;
            border-radius: 50%;
          }
        }
        .size-text{
          font-size: 12px;
          color: #939393;
          margin-top: 10px;
        }
      }
    }
    .sub-btn{
      margin: 20px 0;
      text-align: center;
      .btn-cancel{
        border: 1px solid #eee;
        color: #333;
        font-size: 16px;
        font-weight: 800;
        width: 85px;
        height: 38px;
        border-radius: 50px;
        background: #eee;
        cursor: pointer;
        &:hover{
          background: #e0e0e0;
        }
      }
      .btn-save{
        border: 1px solid #ff8200;
        color: #fff;
        font-size: 16px;
        font-weight: 800;
        width: 85px;
        height: 38px;
        border-radius: 50px;
        background: #ff8200;
        margin-left: 10px;
        cursor: pointer;
        &:hover{
          background: #ff5900;
          color: #fff;
        }
      }
    }
  }
}
.mask{
 width:100%;
 height:100%;
 position: fixed;
 top:0;
 left: 0;
 background: rgba($color: #000000, $alpha: .5);
 z-index: 1000;
}
</style>
